<template>
  <div class="home">
    <Tapbar></Tapbar>
    <Lunbo :mess="arrs"></Lunbo>
    <div class="yw">
      <div class="hengxiang">
        <div v-for="(item, index) in attr" :key="index">
          <span>
            <img :src="item" alt="" />
          </span>
        </div>
      </div>
    </div>
    <div class="gedan">
      <h2>{{ gedan.title }}</h2>
      <div class="tanhezi">
        <div class="bg-lan">
          <div class="bg_img">
            <div class="bg_zhezhao">
              <img :src="gedan.img_link" alt="" />
              <p>开启你的咪咕专属歌单</p>
            </div>
          </div>
        </div>
        <div class="tanhezi-right">
          <div class="right_flex">
            <div
              class="right_f20"
              v-for="(item, index) in gedan.imgsrc"
              :key="index"
            >
              <div>
                <img :src="item.img" alt="" />
              </div>
              <div>
                <p>{{ item.title }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="kaitong">
      <img
        src="https://cdnmusic.migu.cn/tycms_picture/21/06/168/21061717555372_1450x350_8740.png"
        alt=""
      />
    </div>
    <div class="bg_hui">
      <div class="sudi">
        <Xuanxiang :mess="sudi"></Xuanxiang>
        <div class="sudi_ka">
          <div class="sudi_ka_flex">
            <p v-for="(item, index) in xinge.tit" :key="index">
              <span @click="huan(index)">{{ item }}</span>
            </p>
          </div>
          <Xuanka :mess="sudi"></Xuanka>
        </div>
      </div>
    </div>
    <div class="xindie">
      <Fuyong :mess="xindie"></Fuyong>
    </div>
    <div class="zhuanji">
      <Fuyong :mess="zhuanji"></Fuyong>
    </div>
    <div class="paihang_s">
      <Paihang :mess="luxuan"></Paihang>
    </div>
    <div class="yinyue">
      <Yinyue :mess="yinyue"></Yinyue>
    </div>
    <div class="floot">
      <Flootbar></Flootbar>
    </div>
  </div>
</template>

<script>
import Tapbar from "../components/Tapbar.vue";
import Lunbo from "../components/Home/Lunbo.vue";
import Xuanxiang from "../components/Home/Xuanxiang.vue";
import axios from "axios";
import Xuanka from "../components/Home/Xuanka.vue";
import Fuyong from '../components/Home/Fuyong.vue';
import Paihang from '../components/Home/Paihang.vue';
import Yinyue from '../components/Home/Yinyue.vue';
import Flootbar from '../components/Flootbar.vue';
export default {
  name: "Home",
  data() {
    return {
      arrs: "",
      attr: "",
      gedan: "",
      xinge: "",
      sudi: "",
      xindie:"",
      zhuanji:"",
      luxuan:"",
      yinyue:""
    };
  },
  components: {
    Tapbar,
    Lunbo,
    Xuanxiang,
    Xuanka,
    Fuyong,
    Paihang,
    Yinyue,
    Flootbar,
  },
  methods: {
    async fn() {
      let { data } = await axios.get("http://localhost:3000/home");
      this.arrs = data.Lunbo;
      console.log(this.arrs);
      this.attr = data.goneg;
      console.log(this.attr);
      this.gedan = data.gedan;
      console.log(this.gedan);
      this.xinge = data.xinge;
      console.log(this.xinge);
      this.xindie = data.xindie;
      console.log(this.xindie)
      this.zhuanji = data.zhuanji
      this.luxuan = data.paihang
      this.yinyue = data.yinyue
    },
    async huan(id) {
      let { data } = await axios.get("http://localhost:3000/home")
      this.sudi = data.xinge.xianxiang[id];
      console.log(id);
      console.log(this.sudi);
      console.log(this.sudi.zhi);
    },
  },
  created() {
    this.fn();
    this.huan(0);
  },
};
</script>
<style lang='less' scoped>
.yw {
  width: 1400px;
  margin: 28px auto;
  .hengxiang {
    display: flex;
    justify-content: center;
    span {
      margin: 0 25px;
      img {
        width: 198px;
        height: 80px;
      }
    }
  }
}
.gedan {
  width: 1400px;
  margin: 0 auto;
  h2 {
    padding: 10px 0;
  }
  .tanhezi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .bg-lan {
      background: rgb(29, 60, 238);
      box-shadow: 10px 10px 50px 20px white inset;
      .bg_img {
        background: url("https://cdnmusic.migu.cn/v3/static/img/index/gd_b_data.png")
          no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .bg_zhezhao {
          padding: 50px 0 0 0;
          width: 290px;
          height: 440px;
          top: 23.96514%;
          left: 8.80282%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          p {
            color: #fff;
            margin-top: 30px;
          }
          img {
            width: 82.39437%;
          }
        }
      }
    }
    .tanhezi-right {
      display: flex;
      .right_flex {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .right_f20 {
          width: 15%;
          margin: 0 16px 24px;
          img {
            width: 100%;
          }
        }
      }
    }
  }
}
.kaitong {
  width: 1400px;
  margin: 70px auto;
}
.bg_hui {
  background: #f2f2f2;
  height: 420px;
  position: relative;
  top: 50px;
  .sudi {
    width: 1400px;
    margin: 0 auto;
    display: flex;
    position: absolute;
    left: 50%;
    margin-left: -700px;
    top: -40px;
    .sudi_ka {
      display: flex;
      flex-direction: column;
      .sudi_ka_flex {
        display: flex;
        p {
          padding: 10px;
        }
      }
    }
  }
}
.xindie{
  margin-top: 200px;
}
.paihang_s{
  width: 100%;
  margin: 0 auto;
  background: #f2f2f2;
}
.floot{
  width: 100%;
  background: #f3f3f3;
  margin-top: 100px;
  padding: 50px 0 ;
}
.clicklink {
  color: red;
}
</style>
